<template>
  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" >
    <div class="widget am-cf">
      <div class="widget-head am-cf">
        <div class="widget-title am-fl">账号设置</div>
      </div>
      <div class="widget-body am-fr">
        <form class="am-form tpl-form-border-form tpl-form-border-br" data-am-validator :id="id">
          <fieldset>
            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                用户名
              </label>
              <div class="am-u-sm-9 input-field">
                {{formData.username}}
              </div>
            </div>
            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                登录密码
              </label>
              <div class="am-u-sm-9 input-field">
                ***********<a class="am-btn am-btn-link" @click="changePassword">修改</a>
              </div>
            </div>
            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>姓名
              </label>
              <div class="am-u-sm-9 input-field">
                {{formData.realName}}
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>电话号码
              </label>
              <div class="am-u-sm-9 input-field">
                <input type="text" class="am-form-field" placeholder="请输入手机号码"  data-validation-message="请输入正确的手机号码" pattern="^1\d{10}$" required v-model="formData.phoneNo"/>
              </div>
            </div>

            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                业务组
              </label>
              <div class="am-u-sm-9 input-field">
                {{formData.busTeamName}}
              </div>
            </div>


            <div class="am-form-group">
              <label class="am-u-sm-3 am-form-label">
                头像
              </label>
              <div class="am-u-sm-9 am-form-file input-field">
                <file-upload extensions="jpg,png" @uploaded="uploadAvatar">
                  <img class="am-margin-top" :src="formData.avatarUrl">
                </file-upload>
              </div>
            </div>

            <div class="am-form-group">
              <div class="am-u-sm-9 am-u-sm-push-3">

                <button type="submit" class="am-btn am-btn-primary">提交</button>
              </div>
            </div>
            </fieldset>
        </form>
      </div>
    </div>
    <window width="600" ref="setupPasswordWin" title="修改密码">
      <form class="am-form am-form-horizontal">
        <div class="am-form-group">
          <label class="am-u-sm-3 am-form-label">原密码</label>
          <div class="am-u-sm-9">
            <input v-model="oldPassword" type="password" placeholder="请输入您原来的密码" required>
          </div>
        </div>
        <div class="am-form-group">
          <label class="am-u-sm-3 am-form-label">新密码</label>
          <div class="am-u-sm-9">
            <input v-model="newPassword" type="password" placeholder="请输入您的新密码(6-16位)" required>
          </div>
        </div>

        <div class="am-form-group">
          <label class="am-u-sm-3 am-form-label">确认新密码</label>
          <div class="am-u-sm-9">
            <input v-model="confirmNewPassword" type="password" placeholder="请确认新密码" required>
          </div>
        </div>

        <div class="am-form-group">
          <label class="am-u-sm-3 am-form-label">密码强度</label>
          <div class="password-level am-u-sm-9 am-text-left">
            <el-button-group>
              <el-button :class="{'psw-level-1': level === 1}" disabled size="small">弱</el-button>
              <el-button :class="{'psw-level-2': level === 2}" disabled size="small">中</el-button>
              <el-button :class="{'psw-level-3': level === 3}" disabled size="small">强</el-button>
              <el-button :class="{'psw-level-4': level === 4}" disabled size="small">安全</el-button>
            </el-button-group>
          </div>
        </div>

        <div class="am-form-group">
          <div class="am-u-sm-12 am-u-sm-centered">
            <button type="button" class="am-btn am-btn-default" @click="saveNewPassword">确定</button>
          </div>
        </div>
      </form>
    </window>
  </div>

</template>

<script>

import md5 from 'js-md5'

import storage from '../../lib/storage'
import io from '../../lib/io'

    export default{
        data(){
            var userInfo  = storage.getCurrentUserInfo()
            return{
              formData:userInfo,
              oldPassword: '',
              newPassword: '',
              confirmNewPassword: '',
              level: 0
            }
        },
        created:function(){
          this.oldPassword = ''
          this.newPassword = ''
          this.confirmNewPassword = ''
          this.level = 0
        },
      watch: {
        newPassword (newVal) {
          let score = this.passwordGrade(newVal)
          if (score < 21) {
            this.level = 1
          } else if (score < 31) {
            this.level = 2
          } else if (score < 41) {
            this.level = 3
          } else if (40 < score) {
            this.level = 4
          }
        }
      },
        mounted:function(){
          var _this = this ;
          $('#' + this.id ).validator({
            onValid: function(validity) {
              $(validity.field).closest('.input-field').find('.am-alert').hide();
            },
            onInValid: function(validity) {
              var $field = $(validity.field);
              var $group = $field.closest('.input-field');
              var $alert = $group.find('.am-alert');
              // 使用自定义的提示信息 或 插件内置的提示信息
              var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

              if (!$alert.length) {
                $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
                appendTo($group);
              }

              $alert.html(msg).show();
            },
            submit:function(e){
              e.preventDefault();
              var $submitBtn = $('button[type=submit]',e.target);
              $submitBtn.attr("disabled" ,"disabled" )
              _this.$showLoading()
              var formValidity = this.isFormValid();
              var complete = function(){
                _this.$hiddenLoading()
                $submitBtn.removeAttr("disabled" ,"disabled" )
              }
              if(formValidity){
                _this.save(complete);
              }else{
                complete.call()
              }
            }
          });
        },

        methods:{
//          http://www.cnblogs.com/bruceli/archive/2010/05/17/1737208.html
          passwordGrade(pwd) {
            var score = 0;
            var regexArr = ['[0-9]', '[a-z]', '[A-Z]', '[\\W_]'];
            var repeatCount = 0;
            var prevChar = '';
            //check length
            var len = pwd.length;
            score += len > 18 ? 18 : len;
            //check type
            for (var i = 0, num = regexArr.length; i < num; i++) { if (eval('/' + regexArr[i] + '/').test(pwd)) score += 4; }
            //bonus point
            for (var i = 0, num = regexArr.length; i < num; i++) {
              if (pwd.match(eval('/' + regexArr[i] + '/g')) && pwd.match(eval('/' + regexArr[i] + '/g')).length >= 2) score += 2;
              if (pwd.match(eval('/' + regexArr[i] + '/g')) && pwd.match(eval('/' + regexArr[i] + '/g')).length >= 5) score += 2;
            }
            //deduction
            for (var i = 0, num = pwd.length; i < num; i++) {
              if (pwd.charAt(i) == prevChar) repeatCount++;
              else prevChar = pwd.charAt(i);
            }
            score -= repeatCount * 1;
            return score;
          },
          save:function(complete){
            var _this = this
            io.post(io.apiAdminSaveOrUpdateSysUser,_this.formData,
            function(ret){
              complete.call()
              _this.$toast('OK')
              _this.$root.refreshUserInfo()
            },
            function(){
              complete.call()
              _this.$alert('请求服务器失败')
            })
          },
          uploadAvatar:function(info){
            this.formData.avatarUrl = info.url
          },
          changePassword:function(){
            this.$refs.setupPasswordWin.show()
          },
          saveNewPassword:function(){
            if(!this.oldPassword){
              this.$alert('请输入原密码')
              return
            }

            if(!this.newPassword){
              this.$alert('请输入新密码')
              return
            }

            if(!this.confirmNewPassword){
              this.$alert('请确认新密码')
              return
            }

            if(this.newPassword !== this.confirmNewPassword){
              this.$alert('新密码两次输入不相同')
              return
            }

            if(this.level < 2){
              this.$alert('新的密码强度必须到达中级')
              return
            }
            var _this = this
            io.post(io.apiAdminChangeMyPassword,{
              oldPassword:md5(this.oldPassword),newPassword:md5(this.newPassword)
            },
            function(ret){
              if(ret.success){
                _this.$toast('OK')
                _this.$refs.setupPasswordWin.close()
              }else{
                _this.$alert(ret.desc)
              }

            },
            function(){
              _this.$alert('请求服务器失败')
            })

          }
        }
    }
</script>

<style lang="less">
  .password-level {
    span {
      width: 60px;
      display: inline-block;
      text-align: center;
    }
    .psw-level-1 {
      color: #fff;
      border-color: #138940;
      background-color: #00a23f;
    }
    .psw-level-2 {
      color: #fff;
      border-color: #138940;
      background-color: #00a23f;
    }
    .psw-level-3 {
      color: #fff;
      border-color: #138940;
      background-color: #00a23f;
    }
    .psw-level-4 {
      color: #fff;
      border-color: #138940;
      background-color: #00a23f;
    }
  }
</style>
